<template>
	<view>
		<!-- 默认提示选择地址 -->
		<view class="defaultContainer" @click="chooseAddress">
			<uni-icons type="location-filled" color="gray"></uni-icons>
			<view v-if="JSON.stringify(selectedAddress) === '{}'">请选择收货地址</view> <view v-else>{{ showSelected }}</view>
		</view>

		<!-- 弹出层 -->
		<uni-popup ref="popup" backgroundColor="#f5f5f5">
			<view class="popupContainer" :style="{ height: popupHeight + 'px' }">
				<!-- 标题区 -->
				<view class="topContainer">
					<view>收货地址</view>
					<view class="manage" v-if="address.length !== 0">
						<uni-icons type="compose" color="#c00000"></uni-icons>
						<text @click="showPanel" v-if="!managePanel">管理</text> <text @click="closePanel" v-else>完成</text>
					</view>
				</view>

				<!-- 地址列表区 -->
				<view class="middleContainer">
					<view class="tips" v-if="address.length === 0"> ——<text>请添加地址</text>—— </view>

					<scroll-view scroll-y="true" :style="{ height: popupHeight - 100 + 'px' }" v-else>
						<view v-for="item in address" :key="item.id">
							<!-- 地址区域 -->
							<view class="addressItem" @click="selectAddress(item)">
								<!-- 左侧详细地址 -->
								<view class="left">
									<!-- 地址第一行 -->
									<view class="firstLine">
										<text>{{ item.userName }}</text> <text>{{ item.telNumber }}</text>
										<uni-tag inverted text="默认" type="error" size="small" class="tag" />
									</view>
									<!-- 地址第二行 -->
									<view class="secondLine">
										<text>{{ item.provinceName }}</text> <text>{{ item.cityName }}</text>
										<text>{{ item.countyName }}</text> <text>{{ item.streetName || '' }}</text
										>{{ item.detailInfo }}
									</view>
								</view>
								<!-- 右侧单选框 -->
								<view class="right">
									<!-- 正常显示勾选框 -->
									<radio :checked="item.address_state" color="#c00000" v-if="!managePanel" />
									<!-- 管理面板开启时显示修改 -->
									<view class="" v-if="managePanel">
										<uni-icons type="compose" color="#c00000"></uni-icons>
										修改
									</view>
								</view>
							</view>
							<!-- 管理区域 -->
							<view class="manageContainer" v-if="managePanel">
								<view class="setDefault">
									<label class="radio"> <radio color="#c00000" /><text>默认地址</text> </label>
								</view>
								<view class="delete" @click="delAddress(item.id)"> <uni-icons type="trash"></uni-icons>删除 </view>
							</view>
						</view>
					</scroll-view>
				</view>

				<!--  按钮区-->
				<view class="bottomContainer">
					<!-- 左按钮 -->
					<button type="primary" @click="getWXAddress">从微信添加新地址</button>
					<!-- 右按钮 -->
					<button type="default" @click="getNewAddress">新增地址</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
	name: 'my-address',
	data() {
		return {
			popupHeight: 0,
			managePanel: false
		}
	},

	computed: {
		...mapState('m_user', ['address', 'selectedAddress', 'isPopup']),
		...mapGetters('m_user', ['showSelected'])
	},
	watch: {
		// 监听m_user模块的isPopup布尔属性，当my-settle组件的结算按钮改变其状态时，调用弹出层点击事件
		isPopup() {
				this.chooseAddress()
		}
	},
	created() {
		// 获取设备屏幕可用高度的80%
		const { windowHeight: res } = uni.getSystemInfoSync()
		this.popupHeight = res * 0.8
	},
	methods: {
		...mapMutations('m_user', ['updateAddress', 'removeAddress', 'updateSelected']),

		// 定义选择收货地址的点击事件回调
		chooseAddress() {
			// 从底部打开弹出层
			this.$refs.popup.open('bottom')
		},

		// 点击管理按钮显示对应的管理面板
		showPanel() {
			this.managePanel = true
		},
		// 关闭管理面板
		closePanel() {
			this.managePanel = false
		},

		// 删除地址
		delAddress(id) {
			uni.showModal({
				content: '是否确定删除该地址？',
				success: res => {
					// 用户确定删除
					if (res.confirm) {
						// 调用删除地址的mutation
						this.removeAddress({ id: id })
					}
				},
				complete: () => {
					// 判断是否删除最后一个地址，若是则关闭管理面板，必须在完成删除动作后才进行判断
					if (this.address.length === 0) return (this.managePanel = false)
				}
			})
		},

		// 列表中选择地址
		selectAddress(addressItem) {
			// 处于管理面板时不进行地址选择操作
			if (!this.managePanel) {
				// 所选中地址将会存储到m_user模块中的已选地址对象selectedAddress
				this.updateSelected(addressItem)
				// 关闭弹出层
				this.$refs.popup.close()
			}
		},

		// 点击左按钮从微信获取新地址
		async getWXAddress(e) {
			// 返回值是一个数组，第一个元素为错误对象，第二个元素为成功选择后的收货地址对象
			const [error, success] = await uni.chooseAddress()
			// 判断符合以下两个条件才保存所选地址对象
			if (error === null && success.errMsg === 'chooseAddress:ok') {
				// 将地址对象通过提交mutation添加到address数组
				console.log(success)
				this.updateAddress(success)
			}
		},

		// 点击右按钮新增地址
		getNewAddress() {
			uni.navigateTo({
				url: '/subGoods/address/address'
			})
			// 待开发，表单验证
		}
	}
}
</script>

<style lang="scss">
// 默认显示地址
.defaultContainer {
	display: flex;
	align-items: center;
	view {
		min-width: 0; // 设置flex布局item的最小宽度以显示省略号
		font-size: 13px;
		color: gray;
		white-space: nowrap; // 单行文本
		overflow: hidden; // 溢出部分隐藏
		text-overflow: ellipsis; // 文本溢出后，使用 ... 代替
	}
}
// 弹出层
.popupContainer {
	color: #000;
	z-index: 200; // 高于购物车页面底部的结算区即可
	// 标题区
	.topContainer {
		position: relative;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 18px;
		.manage {
			// line-height: 0;
			margin-right: 15px;
			position: absolute;
			top: 0;
			right: 0;
			font-size: 13px;
		}
	}
	// 地址列表区
	.middleContainer {
		.tips {
			text-align: center;
			text {
				padding: 0 10px;
				color: gray;
			}
		}
		.addressItem {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px;
			margin-bottom: 0;
			padding: 10px 15px;
			height: 75px;
			background-color: #fff;
			border-radius: 10px;
			.left {
				line-height: 24px;
				// 地址第一行
				.firstLine {
					display: flex;
					align-items: baseline;
					font-size: 16px;
					font-weight: 700;
					text:nth-of-type(2) {
						margin: 0 10px;
						font-size: 14px;
						font-weight: 400;
						color: gray;
					}
				}
				// 地址第二行
				.secondLine {
					display: -webkit-box; // 此行以下为限制显示为两行地址
					text-overflow: ellipsis;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text {
						margin-right: 10px;
					}
					text:last-child {
						margin-right: 0;
					}
				}
			}
			.right {
				padding-left: 10px;
			}
		}
		// 管理区域
		.manageContainer {
			transition: all 1s;
			display: flex;
			align-items: center;
			margin: 0 10px;
			padding: 5px 0;
			border-top: 1px solid #efefef;
			background-color: #fff;
			height: 20px;
			.radio {
				display: flex;
				align-items: center;
				justify-content: center;
				radio {
					transform: scale(0.7);
				}
			}
			view {
				flex: 1;
				text-align: center;
			}
		}
	}
	// 按钮区
	.bottomContainer {
		display: flex;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		// justify-content: space-around;
		button {
			flex: 1;
			margin: 5px;
			font-size: 16px;
		}
		button:nth-child(2) {
			color: #c00000;
		}
	}
}
</style>
